<template>
    <div class="systemParameter">
        <span>系统参数</span>
        <br>
        <!-- <i>预约参数:</i> -->

        <el-form ref="form" :model="form" label-width="180px">
            <el-row>
                <el-col :span="3">
                    <div class="parameter">预约参数:</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="可以提前几天预约">
                        <el-input v-model="form.front" placeholder="请输入提前几天预约"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="1">天</el-col>
                <el-col :span="17"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="至少提前多久预约">
                        <el-input v-model="form.atLeastFront" placeholder="请输入至少提前多久时间预约"></el-input>
                    </el-form-item></el-col>
                <el-col :span="1">min</el-col>
                <el-col :span="17"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="至少提前多久取消预约">
                        <el-input v-model="form.cancelEdit" placeholder="请输入至少提前多久取消预约"></el-input>
                    </el-form-item></el-col>
                <el-col :span="1">min</el-col>
                <el-col :span="17"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="是否允许修改预约信息">
                        <el-switch v-model="form.switchs" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="17"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="至少提前多久修改预约信息">
                        <el-input v-model="form.frontEdit" placeholder="审批人"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="1">min</el-col>
                <el-col :span="17"></el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <div class="parameter">违约参数:</div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="3">
                    <div class="parameter">违约包含哪几种行为:</div>
                </el-col>
            </el-row>
            <el-col :span="4">
                <el-form-item class="custom-label-width">
                    <el-checkbox v-model="form.overtime">超时未签到</el-checkbox>
                </el-form-item>
            </el-col>
            <el-row>
                <el-col :span="4">
                    <el-form-item class="custom-label-width">
                        <el-checkbox v-model="form.space">空间使用率低
                            <el-input v-model="form.spaceRate" class="custom-input"></el-input>%
                        </el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item class="custom-label-width">
                        <el-checkbox v-model="form.time">时间使用率低
                            <el-input v-model="form.timeRate" class="custom-input"></el-input>%
                        </el-checkbox>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <div class="parameter">使用参数:</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="至少提前多久修改预约信息">
                        <el-input v-model="form.frontArrive" placeholder="请输入提前多久可以签到"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="1">min</el-col>
                <el-col :span="17"></el-col>
            </el-row>
            <el-button type="info">保 存</el-button>
            <el-button type="info">重 置</el-button>
        </el-form>




    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                // 提前几天
                front: '',
                // 至少几天
                atLeastFront: '',
                // 取消
                cancel: '',
                // 至少提前多久取消
                cancelCancel: '',
                // 是否允许修改
                switchs: '',
                // 至少提前多久修改
                frontEdit: '',
                // 超时时间
                overtime: '',
                // 空间
                space: '',
                // 空间率
                spaceRate: '',
                // 时间
                time: '',
                // 时间率
                timeRate: '',
                // 提前多久签到
                frontArrive: ''
            },
            
        }
    }
}
</script>

<style lang="less" scoped>
.systemParameter {
    >span {
        display: inline-block;
        position: relative;
        margin-left: 20px;

        &::before {
            position: absolute;
            content: '';
            top: 2px;
            left: -10px;
            width: 5px;
            height: 20px;
            background-color: #d1d1d1;

        }

        margin-bottom: 10px;
    }

    i {
        font-style: normal;
        margin: 20px 0 0 10px;
    }

    .el-col-1 {
        margin-left: 5px;
        margin-top: 9px;
    }

    .custom-input {
        width: 60px !important;
    }

    .parameter {
        color: #606266;
        font-size: 15px;
        margin-bottom: 20px;
    }
}
</style>